<div class="mdui-dialog-title">设置文档主题</div>
<div class="mdui-dialog-content">

    <p class="mdui-typo-title">主题色</p>
    <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
        <div class="mdui-col">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-layout" value=""/>
                <i class="mdui-radio-icon"></i>
                Light
            </label>
        </div>
        <div class="mdui-col">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-layout" value="dark"/>
                <i class="mdui-radio-icon"></i>
                Dark
            </label>
        </div>
    </div>

    <p class="mdui-typo-title mdui-text-color-theme">主色</p>
    <form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
        <div class="mdui-col mdui-text-color-amber">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="amber"/>
                <i class="mdui-radio-icon"></i>
                Amber
            </label>
        </div>
        <div class="mdui-col mdui-text-color-blue">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="blue"/>
                <i class="mdui-radio-icon"></i>
                Blue
            </label>
        </div>
        <div class="mdui-col mdui-text-color-blue-grey">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="blue-grey"/>
                <i class="mdui-radio-icon"></i>
                Blue Grey
            </label>
        </div>
        <div class="mdui-col mdui-text-color-brown">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="brown"/>
                <i class="mdui-radio-icon"></i>
                Brown
            </label>
        </div>
        <div class="mdui-col mdui-text-color-cyan">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="cyan"/>
                <i class="mdui-radio-icon"></i>
                Cyan
            </label>
        </div>
        <div class="mdui-col mdui-text-color-deep-orange">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="deep-orange"/>
                <i class="mdui-radio-icon"></i>
                Deep Orange
            </label>
        </div>
        <div class="mdui-col mdui-text-color-deep-purple">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="deep-purple"/>
                <i class="mdui-radio-icon"></i>
                Deep Purple
            </label>
        </div>
        <div class="mdui-col mdui-text-color-green">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="green"/>
                <i class="mdui-radio-icon"></i>
                Green
            </label>
        </div>
        <div class="mdui-col mdui-text-color-grey">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="grey"/>
                <i class="mdui-radio-icon"></i>
                Grey
            </label>
        </div>
        <div class="mdui-col mdui-text-color-indigo">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="indigo"/>
                <i class="mdui-radio-icon"></i>
                Indigo
            </label>
        </div>
        <div class="mdui-col mdui-text-color-light-blue">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="light-blue"/>
                <i class="mdui-radio-icon"></i>
                Light Blue
            </label>
        </div>
        <div class="mdui-col mdui-text-color-light-green">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="light-green"/>
                <i class="mdui-radio-icon"></i>
                Light Green
            </label>
        </div>
        <div class="mdui-col mdui-text-color-lime">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="lime"/>
                <i class="mdui-radio-icon"></i>
                Lime
            </label>
        </div>
        <div class="mdui-col mdui-text-color-orange">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="orange"/>
                <i class="mdui-radio-icon"></i>
                Orange
            </label>
        </div>
        <div class="mdui-col mdui-text-color-pink">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="pink"/>
                <i class="mdui-radio-icon"></i>
                Pink
            </label>
        </div>
        <div class="mdui-col mdui-text-color-purple">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="purple"/>
                <i class="mdui-radio-icon"></i>
                Purple
            </label>
        </div>
        <div class="mdui-col mdui-text-color-red">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="red"/>
                <i class="mdui-radio-icon"></i>
                Red
            </label>
        </div>
        <div class="mdui-col mdui-text-color-teal">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="teal"/>
                <i class="mdui-radio-icon"></i>
                Teal
            </label>
        </div>
        <div class="mdui-col mdui-text-color-yellow">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-primary" value="yellow"/>
                <i class="mdui-radio-icon"></i>
                Yellow
            </label>
        </div>
    </form>

    <p class="mdui-typo-title mdui-text-color-theme-accent">强调色</p>
    <form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
        <div class="mdui-col mdui-text-color-amber">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="amber"/>
                <i class="mdui-radio-icon"></i>
                Amber
            </label>
        </div>
        <div class="mdui-col mdui-text-color-blue">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="blue"/>
                <i class="mdui-radio-icon"></i>
                Blue
            </label>
        </div>
        <div class="mdui-col mdui-text-color-cyan">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="cyan"/>
                <i class="mdui-radio-icon"></i>
                Cyan
            </label>
        </div>
        <div class="mdui-col mdui-text-color-deep-orange">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="deep-orange"/>
                <i class="mdui-radio-icon"></i>
                Deep Orange
            </label>
        </div>
        <div class="mdui-col mdui-text-color-deep-purple">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="deep-purple"/>
                <i class="mdui-radio-icon"></i>
                Deep Purple
            </label>
        </div>
        <div class="mdui-col mdui-text-color-green">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="green"/>
                <i class="mdui-radio-icon"></i>
                Green
            </label>
        </div>
        <div class="mdui-col mdui-text-color-indigo">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="indigo"/>
                <i class="mdui-radio-icon"></i>
                Indigo
            </label>
        </div>
        <div class="mdui-col mdui-text-color-light-blue">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="light-blue"/>
                <i class="mdui-radio-icon"></i>
                Light Blue
            </label>
        </div>
        <div class="mdui-col mdui-text-color-light-green">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="light-green"/>
                <i class="mdui-radio-icon"></i>
                Light Green
            </label>
        </div>
        <div class="mdui-col mdui-text-color-lime">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="lime"/>
                <i class="mdui-radio-icon"></i>
                Lime
            </label>
        </div>
        <div class="mdui-col mdui-text-color-orange">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="orange"/>
                <i class="mdui-radio-icon"></i>
                Orange
            </label>
        </div>
        <div class="mdui-col mdui-text-color-pink">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="pink"/>
                <i class="mdui-radio-icon"></i>
                Pink
            </label>
        </div>
        <div class="mdui-col mdui-text-color-purple">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="purple"/>
                <i class="mdui-radio-icon"></i>
                Purple
            </label>
        </div>
        <div class="mdui-col mdui-text-color-red">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="red"/>
                <i class="mdui-radio-icon"></i>
                Red
            </label>
        </div>
        <div class="mdui-col mdui-text-color-teal">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="teal"/>
                <i class="mdui-radio-icon"></i>
                Teal
            </label>
        </div>
        <div class="mdui-col mdui-text-color-yellow">
            <label class="mdui-radio mdui-m-b-1">
                <input type="radio" name="doc-theme-accent" value="yellow"/>
                <i class="mdui-radio-icon"></i>
                Yellow
            </label>
        </div>
    </form>

</div>
<div class="mdui-divider"></div>
<div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple mdui-float-left" mdui-dialog-cancel>恢复默认主题</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>ok</button>
</div>
